<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>loding</title>
</head>

<body>
    <canvas id="canvas"></canvas>

    <script>
        var Loading = function (canvas, options) {
            this.canvas = document.getElementById(canvas);
            this.options = options;
        };

        Loading.prototype = {
            constructor: Loading,
            show: function () {
                var canvas = this.canvas,
                    begin = this.options.begin,
                    old = this.options.old,
                    lineWidth = this.options.lineWidth,
                    canvasCenter = {
                        x: canvas.width / 2,
                        y: canvas.height / 2
                    },
                    ctx = canvas.getContext("2d"),
                    color = this.options.color,
                    num = this.options.num,
                    angle = 0,
                    lineCap = this.options.lineCap,
                    CONST_PI = Math.PI * (360 / num) / 180;
                window.timer = setInterval(function () {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    for (var i = 0; i < num; i += 1) {
                        ctx.beginPath();
                        ctx.strokeStyle = color[num - 1 - i];
                        ctx.lineWidth = lineWidth;
                        ctx.lineCap = lineCap;
                        ctx.moveTo(canvasCenter.x + Math.cos(CONST_PI * i + angle) * begin,
                            canvasCenter.y + Math.sin(CONST_PI * i + angle) * begin);
                        ctx.lineTo(canvasCenter.x + Math.cos(CONST_PI * i + angle) * old, canvasCenter.y +
                            Math.sin(CONST_PI * i + angle) * old);
                        ctx.stroke();
                        ctx.closePath();
                    }
                    angle += CONST_PI;
                    console.log(angle)
                }, 160);
            },
            hide: function () {
                clearInterval(window.timer);
            }
        };

        (function () {
            var options = {
                num: 8,
                begin: 20,
                old: 40,
                lineWidth: 10,
                lineCap: "round",
                color: ["rgb(0, 0, 0)", "rgb(20, 20, 20)", "rgb(40, 40, 40)", "rgb(60, 60, 60)",
                    "rgb(80, 80, 80)", "rgb(100, 100, 100)", "rgb(120, 120, 120)", "rgb(140, 140, 140)"
                ]
            };
            var loading = new Loading("canvas", options);
            loading.show();
        }());
    </script>
</body>

</html>